<template>
  <div>
    <slot>
      <div v-if="FormTitle" style="text-align: center; font-weight: 600; margin-bottom: 20px">
        {{ FormTitle }}
      </div>
    </slot>
    <el-form :model="formData" :label-width="labelWidth + 'px'" ref="ruleFormRef" :rules="rules">
      <el-row :gutter="gutter">
        <template v-for="(item, index) in formItems" :key="index">
          <el-col v-bind="colLayout">
            <el-form-item :label="item.label" :prop="item.field" :style="itemStyle">
              <div style="width: 100%">
                <template v-if="item.type === 'input' || item.type === 'password'">
                  <el-input v-model="formData[`${item.field}`]" v-bind="item.otherOptions" :placeholder="item.placeholder"
                    :show-password="item.type === 'password'" />
                </template>

                <template v-else-if="item.type === 'select'">
                  <el-select style="width: 100%" v-model="formData[`${item.field}`]" :placeholder="item.placeholder"
                    v-bind="item.otherOptions" @change="selectChange">
                    <el-option v-for="option in item.options" :key="option.value" :label="option.title"
                      :value="option.value" />
                  </el-select>
                </template>

                <template v-else-if="item.type === 'datepicker'">
                  <el-date-picker v-model="formData[`${item.field}`]" style="width: 100%" v-bind="item.otherOptions" />
                </template>
              </div>
            </el-form-item>
          </el-col>
        </template>

        <el-col v-bind="colLayout" v-if="isSearch">
          <el-form-item :style="itemStyle">
            <div style="width: 100%; padding-left: 20px">
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item v-if="isFotter">
        <div class="flex justify-end w-full">
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </div>
      </el-form-item>

      <slot name="fotter" />
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { PropType, ref, watch, computed, onMounted } from "vue";
import { IFormItem } from "../types";
import type { FormInstance } from "element-plus";
const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  },
  formItems: {
    type: Array as PropType<IFormItem[]>,
    default: () => []
  },
  labelWidth: {
    type: [String, Number],
    default: 120
  },
  itemStyle: {
    type: Object,
    default: () => ({ padding: "0px 0px" })
  },
  colLayout: {
    type: Object,
    default: () => ({
      xl: 6,
      lg: 8,
      md: 12,
      sm: 24,
      xs: 24
    })
  },
  isFotter: {
    type: Boolean,
    default: true
  },
  FormTitle: {
    type: String,
    default: ""
  },
  isSearch: {
    type: Boolean,
    default: false
  },
  gutter: {
    type: [String, Number],
    default: 0
  }
});

const ruleFormRef = ref<FormInstance>();

const emits = defineEmits(["update:modelValue", "submit", "resetForm"]);

const formData = ref({ ...props.modelValue });

watch(formData, newValue => emits("update:modelValue", newValue), {
  deep: true
});

const rules = computed(() => {
  const permutationlist = {};
  props.formItems.forEach(v => {
    if (v.rules) {
      permutationlist[v.field] = v.rules;
    }
  });
  return permutationlist ?? [];
});

const onSubmit = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log(valid);
      emits("submit");
    }
  });
};
const resetForm = () => {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.resetFields();
  emits("resetForm");
};


const selectChange = (e) => {
  console.log(e)
}

// 向父组件暴露以下方法
defineExpose({
  onSubmit,
  resetForm
});
</script>
<style scoped>
:deep(.el-form-item__label) {
  font-weight: 600;
}
</style>
